<template>
  <div class='talk-info-single single'>
    <header class='site-header'>
      <div class='entry-header header-bg'>
        <img :src='img' alt='' v-for="(img, index) of talk.imgs" :key="index">
      </div>
      <div class='entry-title'>
        <h1>{{ talk.content }}</h1>
      </div>
      <div class='entry-meta'>
        <div class='entry-meta-left no-scrollbar'>
          <div class="author-date" style="animation-delay: 0.7s;">
            <a class="url fn n flex justify-center" href="#" rel="author">{{ talk.nickname }}</a>
            <span class="entry-date">
              <a href="#" rel="bookmark">
                <time :datetime="talk.createTime">{{ createTime }}</time>
              </a>
            </span>
          </div>
        </div>
      </div>
    </header>
    <div class='content-area'>
      <main class='site-main' role='main'>
        <article class='talk-article'>
          <div class='entry-content' v-if='talk.article'>
            <div class="markdown-body" v-html="markdownToHtml(talk.article)" />
          </div>
        </article>
        <aside class='aside-area'>
          <Comment :commentCount='commentCount'/>
        </aside>
      </main>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, provide, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import Breadcrumb from '@/components/Breadcrumb.vue'
import { Comment } from '../components/Comment'
import Avatar from '../components/Avatar.vue'
import { useCommentStore } from '@/stores/comment'
import { v3ImgPreviewFn } from 'v3-img-preview'
import emitter from '@/utils/mitt'
import api from '@/api/api'
import SvgIcon from '@/components/SvgIcon/index.vue'
import markdownToHtml from '@/utils/markdown'

export default defineComponent({
  name: 'talks',
  methods: { markdownToHtml },
  components: { SvgIcon, Breadcrumb, Comment, Avatar },
  setup() {
    const { t } = useI18n()
    const commentStore = useCommentStore()
    const route = useRoute()
    const router = useRouter()
    const reactiveData = reactive({
      talk: '' as any,
      comments: [] as any,
      haveMore: false as any,
      isReload: false as any,
      images: [] as any,
      commentCount: 0 as number,
      createTime: '' as any
    })
    const pageInfo = reactive({
      current: 1,
      size: 7
    })
    commentStore.type = 5
    onMounted(() => {
      toPageTop()
      fetchTalk()
      fetchComments()
    })
    provide(
      'comments',
      computed(() => reactiveData.comments)
    )
    provide(
      'haveMore',
      computed(() => reactiveData.haveMore)
    )
    emitter.on('talkFetchComment', () => {
      pageInfo.current = 1
      reactiveData.isReload = true
      fetchComments()
    })
    emitter.on('talkFetchReplies', (index) => {
      fetchReplies(index)
    })
    emitter.on('talkLoadMore', () => {
      fetchComments()
    })
    const handlePreview = (index: any) => {
      v3ImgPreviewFn({ images: reactiveData.images, index: reactiveData.images.indexOf(index) })
    }
    const fetchTalk = () => {
      api.getTalkById(route.params.talkId).then(({ data }) => {
        if (data.data === null) {
          router.push({ path: '/出错啦' })
          return
        }
        reactiveData.talk = data.data
        document.title=data.data.content
        reactiveData.createTime= data.data.createTime.replace('T',' ')
        if (reactiveData.talk.imgs) {
          reactiveData.images.push(...reactiveData.talk.imgs)
        }
      })
    }
    const fetchComments = () => {
      const params = {
        type: 5,
        topicId: route.params.talkId,
        current: pageInfo.current,
        size: pageInfo.size
      }
      api.getComments(params).then(({ data }) => {
        reactiveData.commentCount=data.data.count
        if (reactiveData.isReload) {
          reactiveData.comments = data.data.records
          reactiveData.isReload = false
        } else {
          if (data.data.records){
            reactiveData.comments.push(...data.data.records)
          }
        }
        reactiveData.haveMore = data.data.count > reactiveData.comments.length;
        pageInfo.current++
      })
    }
    const fetchReplies = (index: any) => {
      api.getRepliesByCommentId(reactiveData.comments[index].id).then(({ data }) => {
        reactiveData.comments[index].replyDTOs = data.data
      })
    }
    const formatTime = (data: any): string => {
      let hours = new Date(data).getHours()
      let minutes = new Date(data).getMinutes()
      let seconds = new Date(data).getSeconds()
      return hours + ':' + minutes + ':' + seconds
    }
    const toPageTop = () => {
      window.scrollTo({
        top: 0
      })
    }
    return {
      ...toRefs(reactiveData),
      handlePreview,
      formatTime,
      t
    }
  }
})
</script>

<style lang="scss" scoped>
.talk-info-single{
  margin-bottom: 0;
}
.talk-info-single .author-date a{
  opacity: 1;
}
.talk-info-single .site-header * {
  color: rgb(255 255 255 / 90%);
  text-shadow: var(--text-shadow);
}
.talk-info-single .site-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding-block: var(--gap-divs);
  margin: 0;
  gap: var(--gap-area);
  position: static;
  padding-inline: var(--edge-lr);
  margin-inline: auto;
}
.talk-info-single .entry-header {
  border-radius: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: black;
  animation: opacity 1s ease-in-out backwards;
  top: 0;
  left: 0;
}
.talk-info-single .site-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-view-box: inset(0);
  transition: 2s;
}
.talk-info-single .entry-title {
  position: relative;
  animation: opacity .75s var(--animation-in) .7s 1 backwards;
  z-index: 2;
}
.talk-info-single .entry-title h1 {
  line-height: 1.75;
  width: min(20em, 90%);
  margin: 0 0 0.5em 0;
  font-size: 1.75rem;
}
.talk-info-single .content-area {
  position: relative;
  background: var(--h-bg);
  border-radius: var(--radius) var(--radius) 0 0;
  padding-bottom: var(--gap-area);
  padding-top: var(--gap-area);
  z-index: 2;
  animation: var(--animation-ot);
  animation-delay: .7s;
}
.talk-info-single .aside-area {
  display: grid;
  z-index: 2;
  width: min(var(--content-size),100%);
  gap: var(--gap-area);
  margin: var(--gap-area) auto 0;
}
.entry-content {
  width: min(var(--content-size, 60rem),100%);
  margin-inline: auto;
  letter-spacing: .01em;
  line-height: 2.5;
  text-align: justify;
  word-break: break-all;
  overflow-wrap: anywhere;
  counter-reset: section;
}
@media (min-width: 1153px) {
  .talk-info-single .entry-title {
    text-align: center;
  }
  .talk-info-single .entry-title h1 {
    max-width: none;
    width: 50%;
    margin: 0 auto 1rem;
  }
  .talk-info-single .entry-meta {
    justify-content: center;
  }
  .talk-info-single .entry-content {
    font-size: 1.05rem;
    width: min(var(--content-size),70%);
  }
}
</style>
